<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="page-header">
			<text class="page-title">uniapp演示</text>
			<text class="subtitle">PDA许可证管理系统</text>
		</view>

		<!-- 功能预览 -->
		<view class="preview-section">
			<view class="section-title">
				<text class="title-text">🎯 功能预览</text>
			</view>

			<view class="preview-cards">
				<view
					v-for="(item, index) in previewList"
					:key="index"
					class="preview-card"
					@click="navigateTo(item.url)"
				>
					<view class="card-icon">
						<text class="icon-text">{{ item.icon }}</text>
					</view>
					<view class="card-content">
						<text class="card-title">{{ item.title }}</text>
						<text class="card-desc">{{ item.description }}</text>
					</view>
					<view class="card-arrow">→</view>
				</view>
			</view>
		</view>

		<!-- 特性展示 -->
		<view class="features-section">
			<view class="section-title">
				<text class="title-text">✨ 核心特性</text>
			</view>

			<view class="features-list">
				<view class="feature-item" v-for="(feature, index) in features" :key="index">
					<view class="feature-icon">
						<text class="icon-text">{{ feature.icon }}</text>
					</view>
					<view class="feature-content">
						<text class="feature-title">{{ feature.title }}</text>
						<text class="feature-desc">{{ feature.description }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-section">
			<button class="btn btn-primary" @click="showInfo">
				<text>查看项目信息</text>
			</button>
			<button class="btn btn-secondary" @click="showFeatures">
				<text>功能特性</text>
			</button>
		</view>

		<!-- 信息弹窗 -->
		<view v-if="showInfoModal" class="info-modal-overlay" @click="closeInfoModal">
			<view class="info-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">项目信息</text>
					<text class="close-btn" @click="closeInfoModal">✕</text>
				</view>

				<view class="modal-content">
					<view class="info-item">
						<text class="label">项目名称：</text>
						<text class="value">许可证管理系统PDA版</text>
					</view>
					<view class="info-item">
						<text class="label">技术栈：</text>
						<text class="value">uniapp + Vue3 + TypeScript</text>
					</view>
					<view class="info-item">
						<text class="label">适配设备：</text>
						<text class="value">720×1440分辨率PDA设备</text>
					</view>
					<view class="info-item">
						<text class="label">支持平台：</text>
						<text class="value">Web、App、微信小程序</text>
					</view>
					<view class="info-item">
						<text class="label">开发状态：</text>
						<text class="value">✅ 开发完成，可运行</text>
					</view>
				</view>

				<view class="modal-actions">
					<button class="btn btn-primary" @click="closeInfoModal">确定</button>
				</view>
			</view>
		</view>

		<!-- 特性弹窗 -->
		<view v-if="showFeaturesModal" class="features-modal-overlay" @click="closeFeaturesModal">
			<view class="features-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">功能特性</text>
					<text class="close-btn" @click="closeFeaturesModal">✕</text>
				</view>

				<view class="modal-content">
					<view class="feature-list">
						<view class="feature-item" v-for="(feature, index) in detailedFeatures" :key="index">
							<text class="feature-title">{{ feature.title }}</text>
							<text class="feature-desc">{{ feature.description }}</text>
						</view>
					</view>
				</view>

				<view class="modal-actions">
					<button class="btn btn-primary" @click="closeFeaturesModal">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				previewList: [
					{
						title: 'JSA创建',
						description: '创建工作安全分析',
						icon: '📋',
						url: '/pages/jsa/create/create'
					},
					{
						title: 'JSA确认',
						description: '确认工作安全分析',
						icon: '✅',
						url: '/pages/jsa/confirm/confirm'
					},
					{
						title: '许可申请',
						description: '申请工作许可证',
						icon: '📝',
						url: '/pages/permit/apply/apply'
					},
					{
						title: '许可审批',
						description: '审批工作许可证',
						icon: '🔍',
						url: '/pages/permit/approval/approval'
					},
					{
						title: '积分登记',
						description: '登记安全积分',
						icon: '⭐',
						url: '/pages/points/record/record'
					},
					{
						title: '积分审批',
						description: '审批积分记录',
						icon: '📊',
						url: '/pages/points/approval/approval'
					},
					{
						title: '运输车登记',
						description: '登记车辆进出',
						icon: '🚛',
						url: '/pages/vehicle/record/record'
					},
					{
						title: '气体检测',
						description: '安全气体检测',
						icon: '🌡️',
						url: '/pages/gas/detection/detection'
					}
				],
				features: [
					{
						title: '📱 PDA适配',
						description: '专为720×1440分辨率优化'
					},
					{
						title: '⚡ 快速响应',
						description: '简洁界面，操作流畅'
					},
					{
						title: '🔄 跨平台',
						description: '支持Web、App、小程序'
					},
					{
						title: '📊 数据管理',
						description: '完整的业务数据流程'
					}
				],
				detailedFeatures: [
					{
						title: '🎯 JSA安全分析',
						description: '创建和确认工作安全分析，支持多级审批流程'
					},
					{
						title: '📋 许可管理系统',
						description: '完整的许可申请、审批、执行流程管理'
					},
					{
						title: '⭐ 积分考核系统',
						description: '安全积分登记、审批、统计分析功能'
					},
					{
						title: '🚛 运输车管理',
						description: '运输车辆进出登记，实时记录和查询'
					},
					{
						title: '🌡️ 气体检测',
						description: '多种气体检测类型，实时监测和历史记录'
					},
					{
						title: '📱 移动端优化',
						description: '针对PDA设备优化的触摸界面和操作体验'
					},
					{
						title: '🔐 权限管理',
						description: '基于角色的权限控制，不同用户不同功能'
					},
					{
						title: '📊 数据统计',
						description: '完整的业务数据统计和报表功能'
					}
				],
				showInfoModal: false,
				showFeaturesModal: false
			}
		},
		methods: {
			// 导航到功能页面
			navigateTo(url) {
				if (url) {
					uni.navigateTo({
						url: url,
						fail: () => {
							uni.showToast({
								title: '功能开发中',
								icon: 'none'
							})
						}
					})
				} else {
					uni.showToast({
						title: '功能开发中',
						icon: 'none'
					})
				}
			},

			// 显示项目信息
			showInfo() {
				this.showInfoModal = true
			},

			// 关闭信息弹窗
			closeInfoModal() {
				this.showInfoModal = false
			},

			// 显示特性弹窗
			showFeatures() {
				this.showFeaturesModal = true
			},

			// 关闭特性弹窗
			closeFeaturesModal() {
				this.showFeaturesModal = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 40rpx;
	}

	.page-header {
		text-align: center;
		margin-bottom: 60rpx;

		.page-title {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #fff;
			margin-bottom: 20rpx;
		}

		.subtitle {
			display: block;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}

	.preview-section,
	.features-section {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;
		backdrop-filter: blur(10rpx);

		.section-title {
			margin-bottom: 40rpx;

			.title-text {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
	}

	.preview-cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30rpx;
	}

	.preview-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
		}

		.card-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 16rpx;
			background: #409EFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;

			.icon-text {
				font-size: 40rpx;
				color: #fff;
			}
		}

		.card-content {
			flex: 1;

			.card-title {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 8rpx;
			}

			.card-desc {
				display: block;
				font-size: 24rpx;
				color: #666;
			}
		}

		.card-arrow {
			font-size: 32rpx;
			color: #999;
		}
	}

	.features-list {
		.feature-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.feature-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 12rpx;
				background: #67C23A;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				.icon-text {
					font-size: 28rpx;
					color: #fff;
				}
			}

			.feature-content {
				flex: 1;

				.feature-title {
					display: block;
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
				}

				.feature-desc {
					display: block;
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	.action-section {
		display: flex;
		gap: 30rpx;
		padding: 40rpx 0;

		.btn {
			flex: 1;
			height: 80rpx;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-weight: bold;
			border: none;

			&.btn-primary {
				background: #409EFF;
				color: #fff;
			}

			&.btn-secondary {
				background: rgba(255, 255, 255, 0.9);
				color: #333;
				border: 2rpx solid #409EFF;
			}
		}
	}

	.info-modal-overlay,
	.features-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.info-modal,
	.features-modal {
		background: #fff;
		border-radius: 20rpx;
		width: 600rpx;
		max-width: 90vw;
		max-height: 80vh;
		overflow-y: auto;

		.modal-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid #e4e7ed;

			.modal-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.close-btn {
				font-size: 36rpx;
				color: #999;
				cursor: pointer;
			}
		}

		.modal-content {
			padding: 30rpx;
			max-height: 60vh;
			overflow-y: auto;

			.info-item {
				display: flex;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.label {
					font-size: 28rpx;
					color: #666;
					min-width: 160rpx;
				}

				.value {
					font-size: 28rpx;
					color: #333;
					flex: 1;
				}
			}

			.feature-list {
				.feature-item {
					margin-bottom: 30rpx;
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid #f0f0f0;

					&:last-child {
						border-bottom: none;
						margin-bottom: 0;
						padding-bottom: 0;
					}

					.feature-title {
						display: block;
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
					}

					.feature-desc {
						display: block;
						font-size: 24rpx;
						color: #666;
						line-height: 1.5;
					}
				}
			}
		}

		.modal-actions {
			padding: 30rpx;
			border-top: 1rpx solid #e4e7ed;

			.btn {
				width: 100%;
				height: 80rpx;
				border-radius: 12rpx;
				font-size: 32rpx;
				font-weight: bold;
				border: none;
				background: #409EFF;
				color: #fff;
			}
		}
	}
</style>
